$(function() {
    $('#btnChooseImg').on('click', function() {
        // 模拟文件上传点击行为
        $('#file').click();
    })
    let file = null;
    // 监听文件选择框的change事件
    $('#file').on('change', function(e) {
        // 1.获取用户选择的文件列表
        let files = e.target.files;
        // 2. 判断用户是否选择了文件（ 伪数组的长度）
        if (files.length == 0) {
            file = null;
            return
        }
        file = files[0];
        // 3.如果用户选择了图片，则把图片渲染到页面的img标签中
        // 3.1URL.createObjectURL()函数接受一个文件，返回值是这个文件的URL地址
        let picUrl = URL.createObjectURL(files[0]);
        $('#image').attr('src', picUrl)

    })

    // 监听上传文件
    $('#btnUploadImg').on('click', function() {
        if (!file) {
            layer.msg('请重新上传图片')
            return

        }
        // 将用户选择的文件转化成base64格式的
        let fd = new FileReader()
        fd.readAsDataURL(file);
        fd.addEventListener('load', function() {
            // 发起请求
            axios.patch('/my/update/avatar', {
                avatar: fd.result
            }).then(({ data: res }) => {
                if (res.code === 0) {
                    layer.msg('更新头像成功', { icon: 1 })
                    window.parent.initUser()
                }
            })

        })
    })
})